import React, { useState, useEffect } from 'react';

import './index.less';
import {
  MessageOutlined,
  CaretDownOutlined,
  RightOutlined,
} from '@ant-design/icons';
import { Button, SearchBar, Space } from 'antd-mobile';
import { SearchOutline, SetOutline } from 'antd-mobile-icons';
import { Tabs } from 'antd';
import { PullRefresh, Toast } from 'react-vant';
import { PullToRefresh, Cell } from '@nutui/nutui-react';
import { history } from 'umi';

// 图片
import t1 from '../../imgs/婚纱摄影.png';
import t2 from '../../imgs/全国旅拍.png';
import t3 from '../../imgs/婚庆策划.png';
import t4 from '../../imgs/婚宴酒店.png';
import t5 from '../../imgs/婚车租赁.png';
import t6 from '../../imgs/婚纱礼服.png';
import t7 from '../../imgs/婚礼跟妆.png';
import t8 from '../../imgs/司仪主持.png';
import t9 from '../../imgs/精选.png';
// 自定义组件
import Concentration from './Concentration';
import Photo from './Photo';
import Wedding from './Wedding';
import Banquet from './Banquet';
import Dress from './Dress';

type Props = {};

export const useWindowSize = () => {
  // 第一步：声明能够体现视口大小变化的状态
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });
  useEffect(() => {
    const updateSize = () =>
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    window.addEventListener('resize', updateSize);
    return () => window.removeEventListener('resize', updateSize);
  }, []);

  return windowSize;
};
export default function index({}: Props) {
  let [area, setArea] = useState('保定');
  let icon = (
    <div className="icon">
      {area}
      <CaretDownOutlined />
      <SearchOutline style={{ marginLeft: '0.2rem' }} />{' '}
    </div>
  );
  // tabs标签页
  const onChange = (key: any) => {
    console.log(key);
  };
  // 标签页数据
  const items = [
    {
      key: '1',
      label: `精选`,
      children: <Concentration />,
    },
    {
      key: '2',
      label: `婚照`,
      children: <Photo />,
    },
    {
      key: '3',
      label: `婚庆`,
      children: <Wedding />,
    },
    {
      key: '4',
      label: `婚宴`,
      children: <Banquet />,
    },
    {
      key: '5',
      label: `婚纱`,
      children: <Dress />,
    },
  ];
  let [column, setcolumn] = useState(false);

  // function useWinSize() {
  //   const [size, setSize] = useState({
  //     width: document.documentElement.clientWidth,
  //     height: document.documentElement.clientHeight,
  //     top: document.documentElement.scrollTop
  //   })

  //   const onResize = useCallback(() => {
  //     setSize({
  //       width: document.documentElement.clientWidth,
  //       height: document.documentElement.clientHeight,
  //       top: document.body.scrollTop
  //     })
  //   }, [])

  //   useEffect(() => {
  //     window.addEventListener('resize', onResize)
  //     return () => {
  //       window.removeEventListener('resize', onResize)
  //     }
  //   }, [])

  //   return size;
  // }

  // const size = useWinSize()

  const onRefresh = (showToast) => {
    return new Promise((resolve) => {
      setTimeout(() => {
        if (showToast) {
          // location.reload();
          Toast.info('刷新成功');
        }

        resolve(true);
      }, 1000);
    });
  };

  return (
    //  <PullRefresh
    //   onRefresh={() => onRefresh(true)}
    //   onRefreshEnd={() => console.log('onRefreshEnd')}
    // >
    <PullToRefresh>
      <div className="home" id="box">
        <div className={column ? 'ceiling1' : 'ceiling'}>
          <MessageOutlined
            onClick={() => {
              history.push('/deta');
            }}
          />
          <h2>婚礼纪</h2>
        </div>
        <div className="content">
          <SearchBar placeholder="请输入内容" icon={icon} />
          <div className="option">
            <ul>
              <li>
                <img src={t1} alt="" />
                <p>婚纱摄影</p>
              </li>
              <li
                onClick={() => {
                  history.push('/store');
                }}
              >
                <img src={t2} alt="" />
                <p>全国旅拍</p>
              </li>
              <li>
                <img src={t3} alt="" />
                <p>婚庆策划</p>
              </li>
              <li>
                <img src={t4} alt="" />
                <p>婚宴酒店</p>
              </li>
              <li>
                <img src={t5} alt="" />
                <p>婚车租赁</p>
              </li>
              <li>
                <img src={t6} alt="" />
                <p>婚纱礼服</p>
              </li>
              <li>
                <img src={t7} alt="" />
                <p>婚礼跟妆</p>
              </li>
              <li>
                <img src={t8} alt="" />
                <p>司仪主持</p>
              </li>
            </ul>
          </div>
          <div className="recommend">
            <div className="left">
              <div className="cover">
                <h3>婚纱照花费</h3>
                <span>
                  先看报价不吃亏 <RightOutlined />
                </span>
              </div>
            </div>
            <div className="right">
              <div className="top">
                <div className="title">
                  <div className="concentration">
                    <img src={t9} alt="" />
                    <span>商家精选</span>
                  </div>
                  <h3>婚宴酒店报价</h3>
                  <div>
                    先看报价不吃亏{' '}
                    <span>
                      <span>GO</span>
                      <RightOutlined />
                    </span>
                  </div>
                </div>
              </div>
              <div className="bottom">
                <div className="letf">
                  <div className="covers">
                    <h3>网红好店</h3>
                    <span>
                      同城15佳 <RightOutlined />
                    </span>
                  </div>
                </div>
                <div className="right">
                  <div className="covers">
                    <div className="covers">
                      <h3>热门婚纱</h3>
                      <div>
                        576人正在看{' '}
                        <span>
                          <span>GO</span>
                          <RightOutlined />
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
        </div>
      </div>
    </PullToRefresh>
  );
}
